<template>
<div>
<Card title="日志页面">
  <Alert class="bcolor padd" style="margin-top:20px"><Icon type="ios-bug-outline"  style="margin-right:10px;" />总共有{{total}}条数据</Alert>
    <Table border :columns="columns1" :data='data' class="margin padd" ></Table>

   <Page class="page"
   :total="total" show-elevator show-sizer :current.sync="page.page"
    @on-change="change" :page-size="page.limit"
    @on-page-size-change="sizeChange" />
</Card>

</div>

</template>

<script>
import { list } from '@/api/example/table'

export default {
  data () {
    return {
      columns1: [
        {
          title: '操作类型',
          key: 'type',
          align: 'center'
        },
        {
          title: '操作人',
          key: 'author',
          align: 'center'
        },
        {
          title: '执行结果',
          key: 'title',
          align: 'center'
        },
        {
          title: '操作时间',
          key: 'display_time',
          align: 'center'
        },
        {
          title: '描述',
          key: 'forecast',
          align: 'center'
        }
      ],
      data: [],
      page: {
        page: 1,
        limit: 20
      },
      total: ''

    }
  },
  methods: {

    change () {
      this.getList()
    },
    sizeChange (size) {
      console.log(size)
      this.page.limit = size
      this.getList()
    },
    getList () {
      list(this.page)
        .then((data) => {
          console.log(data)
          this.data = data.data.items
          this.total = data.data.total
        })
    }
  },
  created () {
    this.getList()
  }

}

</script>
<style>
.padd{
margin-left: 40px;
}
.margin{
  margin-bottom: 20px ;
margin-left: 40px;
  margin-right: 40px;

}
.page{padding: 20px;text-align: center;}
.bcolor{
  width: 55%;
  background-color:#fff;
  border:none;

}
</style>
